<!-- #layout name=blank-->

<div id="app">
  <div class="page-header">
    <h1 class="title">Content types</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a :href="createNewContentTypeUrl" class="btn green navbar-btn">Create</a>
      <a
        v-if="tableDataSelected.length > 0"
        @click="onDelete"
        class="btn red navbar-btn"
        >Delete</a
      >
    </div>
  </div>

  <kb-table
    :show-select="true"
    :data="tableData"
    :selected.sync="tableDataSelected"
  >
    <kb-table-column :label=" Kooboo.text.common.name">
      <template v-slot="row">
        <a :href="getDetailUrl(row.id)" @click.stop>
          {{ row.name }}
        </a>
      </template>
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.site.contentType.fields">
      <template v-slot="row">
        <span class="badge blue">{{ row.propertyCount }}</span>
      </template>
    </kb-table-column>
  </kb-table>
</div>

<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbForm.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Contents/ContentTypes.js"></script>
